<template>
    <view class="wrap">
        <view class="header">
            <img
            class="headerBg"
            src="https://ainengli.hzjrsw.com/jkhx/sportsBg.png"
            alt=""
            />
        </view>
        <view class="content">
            <view class="title">运动内容</view>
            <view class="sports">
                <view class="left">
                    <icon type="" :class="['iconfont', state.contentObj.icon, 'icons']"></icon>
                </view>
                <view class="right_info">
                    <view class="name">{{ state.contentObj.content }}</view>
                    <view class="time">{{ state.contentObj.cronCycle }}分钟</view>
                </view>
            </view>
            <view class="heart">
                <view class="heart_title">运动心率控制</view>
                <view class="text">为了您运动过程的安全性，请您将运动心率范围控制在<text style="font-weight: bold">{{ state.contentObj.heartRateMin }}-{{ state.contentObj.heartRateMax }}</text>次/分，以确保运动安全有效。</view>
            </view>
        </view>
        <view @tap="recordSports" class="btn">
            <view class="wraps">
                <text class="name">记录运动</text>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { readDetail, taskDetailInfo } from '@/api/hmm'

const state = reactive({
    id: '',
    contentObj: {},
    userInfo: {},
    getUserId: '',
})
const sportTypeList =ref([
    {
      url: 'icon-yumaoqiu1',
      active: false,
      value: '羽毛球'
    },
    {
      url: 'icon-yuqie1',
      active: false,
      value: '瑜伽'
    },
    {
      url: 'icon-youyong1',
      active: false,
      value: '游泳'
    },
    {
      url: 'icon-guangchangwu1',
      active: false,
      value: '广场舞'
    },
    {
      url: 'icon-lanqiu1',
      active: false,
      value: '篮球'
    },
    {
      url: 'icon-manzou1',
      active: false,
      value: '慢走'
    },
    {
      url: 'icon-kuaizou1',
      active: false,
      value: '快走'
    },
    {
      url: 'icon-paobu1',
      active: false,
      value: '跑步'
    },
    {
      url: 'icon-kangfucao1',
      active: false,
      value: '康复操'
    },
    {
      url: 'icon-huaibengyundong1',
      active: false,
      value: '踝泵运动'
    },
    {
      url: 'icon-huaxue1',
      active: false,
      value: '滑雪'
    }
])

onLoad((options) => {
  state.id = options ? options.id : ''
})
onShow(() => {
  state.userInfo = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}
  state.getUserId = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).userId
    : ''
  init()
})
const init = () => {
  uni.showLoading({
    title: '加载中'
  })

  taskDetailInfo(state.id).then((res) => {
    uni.hideLoading()
    if (res.code == 0) {
      state.contentObj = JSON.parse(res.data.itemContent)
      let iconUrl = sportTypeList.value.find(item => item.value == state.contentObj.content)
      state.contentObj.icon = iconUrl.url
    }
  })
}
const recordSports = () => {
    uni.navigateTo({
      url: '/packA/pages/sportsInformation/index'
    })
}

</script>

<style lang="scss" scoped>
.wrap {
    min-height: calc(100vh - 48rpx);
    overflow: auto;
    background: #f3f7f8;
    padding-bottom: calc(184rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(184rpx + env(safe-area-inset-bottom));
    .header {
        height: 328rpx;
        position: relative;
        .headerBg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: block;
        }
    }
    .content {
        background: #FFFFFF;
        position: relative;
        z-index: 2;
        border-radius: 16rpx;
        padding: 32rpx;
        margin: -124rpx 32rpx 0;
        .title {
            font-weight: 500;
            font-size: 32rpx;
            color: #222222;
            margin-bottom: 24rpx;
        }
        .sports {
            border-radius: 8rpx;
            border: 1rpx solid #E5E6EB;
            padding: 32rpx;
            margin-bottom: 24rpx;
            display: flex;
            justify-content: flex-start;
            gap: 20rpx;
            .left {
                display: inline-block;
                vertical-align: middle;
                width: 96rpx;
                height: 96rpx;
                line-height: 96rpx;
                text-align: center;
                background: #f2fdfb;
                border-radius: 8rpx;
                .icons {
                    font-size: 64rpx;
                    color: #00d1b6;
                }
            }
            .right_info {
                .name {
                    font-weight: 500;
                    font-size: 30rpx;
                    color: #333333;
                }
                .time {
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #999999;
                    margin-top: 10rpx;
                }
            }
        }
        .heart {
            background: rgba(220,239,240,0.4);
            border-radius: 8rpx;
            margin-top: 24rpx;
            padding: 16rpx 24rpx;
            font-weight: 400;
            font-size: 30rpx;
            color: #008372;
            .heart_title {
                font-weight: 600;
                margin-bottom: 8rpx;
            }
            .text {
                text-align: justify;
            }
        }
    }
    .btn {
        position: fixed;
        z-index: 3;
        width: 100%;
        background: #fff;
        left: 0;
        bottom: 0;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
        .wraps {
            margin: 22rpx 32rpx;
            border-radius: 44rpx;
            background: #00d1b6;
            border-radius: 44rpx;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            .name {
                display: inline-block;
                vertical-align: middle;
                font-size: 32rpx;
                color: #fff;
                font-weight: 700;
            }
            .img {
                display: inline-block;
                vertical-align: middle;
                width: 40rpx;
                height: 40rpx;
            }
        }
    }
}
</style>
